import React, { useState, useEffect } from 'react'
import { useSearchParams } from 'react-router-dom'
import Footer from '../components/Footer'
import Header from '../components/Header'
import BreadCrumb from '../components/BreadCrumb';
import api from '../config';
import {formateDate} from '../util'
export default function NewsDetails() {
  // 读取上一页传入的参数
  let [params] = useSearchParams()
  let nid = params.get('nid');
  //  新闻详情
  let [news, setNews] = useState([])
  // 异步请求数据
  useEffect(() => {
    // 根据新闻编号查询新闻
    let url = api.newsDetails + '?nid=' + nid
    // console.log(url);
    fetch(url).then(res => {
      return res.json()
    }).then(body => {
      // console.log(body);
      setNews(body)
    }).catch(err => {
      console.log(err);
    })

  }, [])
  // 面包屑数据
  let breadCrumbData = [
    { path: '/', name: '首页' },
    { path: '/news', name: '公司动态' },
    { path: '#', name: '新闻详情' }
  ]
  return (
    <>
      {/* F1 页头 */}
      <Header></Header>
      {/* F2 面包屑 */}
      <BreadCrumb data={breadCrumbData}></BreadCrumb>
      {/* F3 新闻主体 */}
      <div className="main container">
        <div className="news_details">
          <h2>{news.title}</h2>
          <span>发布时间：{formateDate(news.pubTime,'long')}</span>
          {/* 相当于 innerText */}
          {/* <div className="news_content">
            {news.content}
          </div> */}
          <div className="news_content" dangerouslySetInnerHTML={{__html:news.content}}>
          </div>
        </div>
      </div>
      {/* F4 页尾 */}
      <Footer></Footer>
    </>
  )
}
